<template>
	<div class="roomDetail">
		<div class="roomDetailImg">
			<image :src="roomDetail.image" mode=""></image>
		</div>
		<div class="roomDetailCont">
			<div class="roomDetailCont_top">
				<div class="roomDetailCont_top_left">
					房间号：{{roomDetail.name || ''}}
					<div class="yuan"></div> <span>{{roomDetail.status | statusFilter}}</span>
					<div class="roomScrollRight_items_center_right1" v-if="roomDetail.count > 0">
						洁
					</div>
					<div class="roomScrollRight_items_center_right" v-if="roomDetail.work > 0">
						修
					</div>
				</div>
			</div>
			<div class="roomDetailCont_center">
				{{roomDetail.sub_title || ''}}<span>|</span>{{roomDetail.address || ''}}
			</div>

			<div class="roomDetailCont_shear">
				<div class="roomDetailCont_shear_top">
					<image src="https://wx.sjcmhz.com/static/image/share.png" mode=""></image>
				</div>
				<div class="roomDetailCont_shear_bottom">
					分享
				</div>
			</div>
			<!-- 分享 -->
			<button open-type="share" style="border:none !important;z-index: 9;opacity: 0;"
				class="roomDetailCont_shear">
				<div class="roomDetailCont_shear_top">
					<image src="https://wx.sjcmhz.com/static/image/share.png" mode=""></image>
				</div>
				<div class="roomDetailCont_shear_bottom">

				</div>
			</button>
			<div style="margin-top: 14rpx;">

			</div>

			<u-tabs :list="list1" lineColor="#2E61FF" lineWidth="20"
				itemStyle="padding-left: 9.5%; padding-right: 9.5%; height: 44px;" :activeStyle="{
			    color: '#2E61FF',
			    fontWeight: 'bold',
			    transform: 'scale(1.05)'
			}" :inactiveStyle="{
			    color: '#999999',
			    transform: 'scale(1)'
			}" @change="changeEvent()"></u-tabs>
		</div>


		<!-- list -->
		<div class="pagesList" v-if="tabIndex == 0">
			<!-- 固定设备 -->
			<div class="pagesList_items">
				<div class="pagesList_left">
					<input type="text" v-model="roomDetail.names" value="1111111" @blur="sendInput">
				</div>
				<div class="pagesList_right">
                     <input type="text" v-model="roomDetail.number" value="1111111" @blur="sendInput">
				</div>
			</div>
			<page-list :list='SBList' style="height: 100%;" @closeEvnet='closeEvnet' @upDate='upDate' ref="sblist">
			</page-list>
		</div>
		<div class="pagesList" style="margin-top: 20rpx;" v-if="tabIndex == 1">

			<anchorlist :list='anchorList' style="height: 100%;"></anchorlist>
			<u-modal :show="show" @confirm="confirm" :title='modalTitle' @cancel='show=!show' ref="uModal"
				showCancelButton></u-modal>
			<frool v-if="froolShow" :froolShow='froolShow' @confirm='FroolConfirm' @cancel='froolShow=false'></frool>
			<div class="bottomBtn">

				<div class="bottomBtn2" @click='qingtuiEvent()'>
					清退
				</div>
				<div class="bottomBtn3" @click='huanEvent()'>
					换房
				</div>
			</div>

		</div>

		<!-- list -->
		<div class="pagesList" v-if="tabIndex == 2">
			<page-list-gd :list='GDList' @upDate='upDate'></page-list-gd>
		</div>

		<!-- 选中后操作 -->
		<div class="sbBtn">
			<div class="sbBtn_left" @click='quxiaoEvent'>
				取消选择
			</div>
			<div class="sbBtn_right" @click='zyEvent'>
				选房转移
			</div>
		</div>

	</div>
</template>

<script>
	import pageList from '@/pagesA/components/sbList.vue'
	import anchorlist from '@/pagesA/components/anchorlist.vue'
	import frool from '@/pages/server/components/frool.vue'
	import pageListGd from '@/pagesA/components/list.vue'
	export default {
		components: {
			pageList,
			anchorlist,
			frool,
			pageListGd
		},
		data() {
			return {
				list1: [{
					name: '关联设备',
					status: 0
				}, {
					name: '人员信息',
					status: 1
				}, {
					name: '服务工单',
					status: 2
				}],
				roomId: 1,
				roomDetail: {},
				SBList: [],
				tabIndex: 0,
				anchorList: undefined,
				show: false,
				modalTitle: '',
				froolShow: '',
				GDList: []
			}
		},
		filters: {
			statusFilter(v) {
				var s = ''
				// 1可预定 2待入驻 3已入住 4待搬离 5未保洁
				switch (v) {
					case '1':
						s = '可预定'
						break;
					case '2':
						s = '待入驻'
						break;
					case '3':
						s = '已入住'
						break;
					case '4':
						s = '待搬离'
						break;
					case '5':
						s = '未保洁'
						break;
				}
				return s
			}
		},

		onShow() {
			if (this.roomId) {
				this.getRoomDetail()
			}
		},
		onLoad(opt) {
			this.roomId = opt.id || 797
			this.getRoomDetail()
		},
		methods: {
			closeEvnet(idx) {
				this.SBList[idx].statusShow = !this.SBList[idx].statusShow
			},
			// 取消选择
			quxiaoEvent() {
				for (var i in this.SBList) {
					this.SBList[i].statusShow = false
				}
			},
			// 转移
			zyEvent() {
				this.$refs.sblist.zyEvent()
			},
			changeEvent(e) {
				this.tabIndex = e.index
				if (e.index == 1 && !this.anchorList) {
					this.getRoomAnchor()
				} else if (e.index == 2) {
					this.getGd()
				}
			},
			
			async sendInput() {
				const params = {
					names:this.roomDetail.names,
					number:this.roomDetail.number,
					room_id:this.roomDetail.room_id
				}
				const {
					data
				} = await this.$request(this.$Api.roomRoom, params, "POST")
				if (data.code !== 0) return
				uni.showToast({
					title: "操作成功",
					mask: true,
					icon: "none",
					duration: 1000
				})
			},
			async getRoomAnchor() {
				const {
					data
				} = await this.$request(this.$Api.roomAnchor, {
					room_id: this.roomId
				}, "POST")
				if (data.code !== 0) return
				this.anchorList = data.data.list
			},
			async getRoomDetail() {
				const {
					data
				} = await this.$request(this.$Api.roomDetail, {
					room_id: this.roomId
				}, "POST")
				if (data.code !== 0) return
				this.roomDetail = data.data.list
				this.getSb()
			},
			// roomEquipment
			async getSb() {
				const {
					data
				} = await this.$request(this.$Api.roomEquipment, {
					room_id: this.roomId
				}, "POST")
				if (data.code !== 0) return
				for (var i in data.data.list) {
					data.data.list[i].statusShow = false
				}
				this.SBList = data.data.list
			},
			// roomEquipment
			async getGd() {
				const {
					data
				} = await this.$request(this.$Api.roomWork, {
					room_id: this.roomId
				}, "POST")
				if (data.code !== 0) return
				this.GDList = data.data.list
			},
			// 更新
			upDate() {
				this.getSb()
				this.getGd()
			},
			// 清退
			async qingtuiEvent() {
				this.modalTitle = '是否清退？'
				this.show = true
				this.isHuan = 1

			},
			// 换房
			async huanEvent() {
				// this.modalTitle = '是否换房？'
				// this.isHuan = 2
				// this.shows = true
				this.froolShow = true
			},
			async confirm() {
				var params = {
					anchor_id: this.anchorList[0].anchor_id,
				}
				const {
					data
				} = await this.$request(this.$Api.anchorExit, params, "POST")
				if (data.code !== 0) return
				this.show = false
				uni.showToast({
					title: "操作成功",
					mask: true,
					icon: "none",
					duration: 1000
				})
			},
			async FroolConfirm(e) {
				var params = {
					anchor_id: this.anchorList[0].anchor_id,
					room_id: e.room_id,
					storey_id: e.storey_id,
					floor_id: e.floor_id,
				}
				const {
					data
				} = await this.$request(this.$Api.anchorExit, params, "POST")
				if (data.code !== 0) return
				this.show = false
				uni.showToast({
					title: "操作成功",
					mask: true,
					icon: "none",
					duration: 1000
				})
			}

		},
		onShareAppMessage(res) {
			//console.log('onShareAppMessage',res);
			return {
				title: this.roomDetail.title,
				imageUrl: this.roomDetail.image,
				path: '/pagesA/index/roomDetail?id=' + this.roomDetail.room_id
			}
		},
	}
</script>

<style lang="less">
	.roomDetail {
		// background: #f5f5f5;
		margin-bottom: 200rpx;
	}
	
	.roomScrollRight_items_center_right {
		width: 88rpx;
		height: 34rpx;
		border-radius: 8rpx;
		// border: 2rpx solid #CECECE;
		font-size: 22rpx;
		color: #fff;
		text-align: center;
		line-height: 34rpx;
		margin-left: 8rpx;
		width: 32rpx;
		height: 32rpx;
		background: #D0021B;
	}
	
	.roomScrollRight_items_center_right1 {
		width: 88rpx;
		height: 34rpx;
		border-radius: 8rpx;
		// border: 2rpx solid #CECECE;
		font-size: 22rpx;
		color: #fff;
		text-align: center;
		line-height: 34rpx;
		margin-left: 8rpx;
		width: 32rpx;
		height: 32rpx;
		background: #F5A623;
	}

	.pagesList_items {
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		box-sizing: border-box;
		background: #fff;
		width: 694rpx;
		min-height: 128rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin: 20rpx auto 0 auto;
		padding: 0 40rpx;
		box-sizing: border-box;
		font-size: 32rpx;
		color: #000;
		padding-left: 88rpx;
		position: relative;
		// padding-bottom: 20rpx;
		.pagesList_left,.pagesList_right{
			width: 50%;
			height: 100%;
			line-height: 128rpx;
			input{
				width: 100%;
				height: 100%;
			}
		}
		.pagesList_right{
			display: flex;
			align-items: center;
			justify-content: flex-end;
			input{
				width: 156rpx;
				height: 64rpx;
				background: #EFEFEF;
				border-radius: 20rpx;
				padding: 0 26rpx;
				box-sizing: border-box;
			}
		}
	}

	.roomDetailImg {
		width: 750rpx;
		height: 430rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.pagesList {
		padding-bottom: 150rpx;
	}

	.roomDetailCont {
		width: 100%;
		min-height: 246rpx;
		background: #fff;
		padding: 28rpx 0rpx;
		box-sizing: border-box;
		position: relative;

		.roomDetailCont_top {
			font-size: 36rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 40rpx;
			box-sizing: border-box;

			.roomDetailCont_top_left {
				display: flex;
				align-items: center;

				.yuan {
					width: 12rpx;
					height: 12rpx;
					background: #2E61FF;
					border-radius: 50%;
					margin-right: 8rpx;
					margin-left: 28rpx;
				}

				span {
					color: #2E61FF;
					font-size: 24rpx;
					margin: 0 10rpx 0 0rpx;
				}

			}

		}

		.roomDetailCont_center {
			font-size: 24rpx;
			margin-top: 14rpx;
			padding: 0 40rpx;
			box-sizing: border-box;

			span {
				margin: 0 20rpx;
			}
		}
	}

	.roomDetailCont_shear {
		position: absolute;
		top: 38rpx;
		right: 50rpx;
		width: 50rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;

		.roomDetailCont_shear_top {
			width: 32rpx;
			height: 32rpx;
			margin-left: 9rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.roomDetailCont_shear_bottom {
			font-size: 24rpx;
			color: #666;
			margin-top: 14rpx;
		}
	}

	.bottomBtn {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 750rpx;
		height: 116rpx;
		background: #FFFFFF;
		padding: 0 32rpx;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		bottom: 0;

		.bottomBtn1 {
			width: 164rpx;
			height: 68rpx;
			background: #FFFFFF;
			border: 2rpx solid #2D60FF;
			font-size: 28rpx;
			text-align: center;
			color: #2D60FF;
			line-height: 68rpx;
			box-sizing: border-box;
			margin-left: 20rpx;
		}

		.bottomBtn2 {
			width: 164rpx;
			height: 68rpx;
			font-size: 28rpx;
			text-align: center;
			color: #2D60FF;
			line-height: 68rpx;
			background: #D0021B;
			color: #fff;
			margin-left: 20rpx;
		}

		.bottomBtn3 {
			width: 164rpx;
			height: 68rpx;
			font-size: 28rpx;
			text-align: center;
			color: #2D60FF;
			line-height: 68rpx;
			background: #2D60FF;
			color: #fff;
			margin-left: 20rpx;

		}
	}

	.sbBtn {
		display: flex;
		position: fixed;
		bottom: 0;
		z-index: 9;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 92rpx;

		.sbBtn_left,
		.sbBtn_right {
			width: 50%;
			height: 100%;
			background: #D8D8D8;
			text-align: center;
			line-height: 92rpx;
			color: #333;
			font-size: 28rpx;
		}

		.sbBtn_right {
			color: #fff;
			background: #2D60FF;
		}
	}
</style>
